<template>
  <div>
  <div class="page-container">
    <!-- 顶部操作区：楼层选择 + 统计 + 操作按钮 -->
    <div class="top-operation-bar">
      <!-- 楼层选择 -->
      <div class="floor-selection">
        <span class="label">楼层：</span>
        <div class="floor-tabs">
          <!-- 遍历楼层，自定义选中逻辑 -->
          <div
              v-for="floor in floorList"
              :key="floor.id"
              class="floor-tab"
              :class="{ active: activeFloorId === floor.id }"
              @click="handleFloorChange(floor)"
          >
            <!-- 编辑图标 -->
            <el-icon class="edit-icon" @click.stop="openEditFloorDialog(floor)">
              <Edit />
            </el-icon>
            <!-- 楼层名称 -->
            <span class="floor-name">{{ floor.floorName }}</span>
          </div>
        </div>
      </div>

      <!-- 状态统计 -->
      <div class="status-stats">
        <div class="stat-item" style="background-color: #e1e1e1;">
          <span class="count">{{ freeCount }}</span>
          <span class="text">空闲</span>
        </div>
        <div class="stat-item occupied">
          <span class="count">{{ occupiedCount }}</span>
          <span class="text">已入住</span>
        </div>
        <div class="stat-item leave">
          <span class="count">{{ leaveCount }}</span>
          <span class="text">请假中</span>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="action-buttons">
        <el-button type="primary" @click="openAddFloorDialog">新增楼层</el-button>
        <el-button type="primary" @click="openAddRoomDialog">新增房间</el-button>
      </div>
    </div>

    <!-- 房间列表区域 -->
    <div class="room-container">
      <!-- 房间列表：一行三个房间 -->
      <div class="room-grid">
        <!-- 遍历“分组后（同房间合并）的列表” -->
        <div
            v-for="(room, roomIdx) in roomList"
            :key="roomIdx"
            class="room-card"
        >
          <!-- 房间头部（编号、类型 + 操作按钮） -->
          <div class="room-header">
            <div class="room-basic">
              <h3>房间号：{{ room.room.roomCode }}</h3>
              <p>房间类型：{{ room.roomType.name }}</p>
            </div>
            <div class="room-actions">
              <!-- 删除按钮：存在床位时置灰禁用 -->
              <el-button
                  size="mini"
                  class="plain-btn"
                  :disabled="room.bedList && room.bedList.length > 0"
                  @click="handleDeleteRoom(room)"
              >
                删除
              </el-button>
              <el-button size="mini" class="plain-btn" @click="handleUpdateRoom(room)">编辑</el-button>
              <el-button size="mini" class="plain-btn" @click="openRoomDetailDialog(room)">查看</el-button>
              <!-- 新增床位按钮：床位已满时置灰禁用 -->
              <el-button
                  size="mini"
                  type="primary"
                  :disabled="isBedCountFull(room)"
                  @click="openAddBedDialog(room)"
              >
                新增床位
              </el-button>
            </div>
          </div>

          <!-- 床位区域（整体灰色背景 + 自动排版） -->
          <div class="beds-wrapper">
            <!-- 有床位时：每排2个的网格布局 -->
            <div v-if="room.bedList && room.bedList.length" class="beds-grid">
              <div
                  v-for="(bed, bedIdx) in room.bedList"
                  :key="bedIdx"
                  class="bed-item"
              >
                <div class="bed-info">
                  <!-- 状态图片（左侧） -->
                  <div class="status-image-container">
                    <img
                        v-if="bed.bedStatus === '2'"
                        src="https://yss-01.oss-cn-hangzhou.aliyuncs.com/uploads/images/ce3dfc0b-72d1-40b8-9d5c-90ff2ffc1034-请假中.png"
                        alt="请假中"
                        class="status-image"
                    >
                    <img
                        v-else-if="bed.elderName"
                        src="https://yss-01.oss-cn-hangzhou.aliyuncs.com/uploads/images/00e8a6c3-a00b-4177-b9fe-1bd65c576157-已入住.png"
                        alt="已入住"
                        class="status-image"
                    >
                    <img
                        v-else
                        src="https://yss-01.oss-cn-hangzhou.aliyuncs.com/uploads/images/f9d45460-bae7-4e8a-977b-d85157a17f41-空闲.png"
                        alt="空闲"
                        class="status-image"
                    >
                  </div>
                  <!-- 文字内容（右侧） -->
                  <div class="text-content">
                    <p>床位号：{{ bed.bedNo }}</p>
                    <p v-if="bed.elderName">老人姓名：{{ bed.elderName }}</p>
                    <p v-else>空闲</p>
                  </div>
                  <!-- 新增：床位操作图标 -->
                  <div class="bed-actions">
                    <el-icon class="edit-icon" @click="handleUpdateBed(bed)">
                      <Edit />
                    </el-icon>
                    <el-popconfirm
                        title="确定删除该床位吗？"
                        @confirm="handleDeleteBed(bed)"
                    >
                      <template #reference>
                        <el-icon class="delete-icon">
                          <Delete />
                        </el-icon>
                      </template>
                    </el-popconfirm>
                  </div>
                </div>
              </div>
            </div>
            <!-- 无床位时：空状态提示 -->
            <div v-else class="no-bed-tip">
              <el-empty description="当前房间暂无床位" class="custom-empty"
              ></el-empty>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 新增楼层对话框 -->
  <el-dialog title="新增楼层" v-model="addFloorDialogVisible" width="30%">
    <el-form :model="floorForm" label-width="80px" :rules="floorRules" ref="floorFormRef">
      <el-form-item label="楼层名称" prop="floorName">
        <el-input
            v-model="floorForm.floorName"
            maxlength="5"
            show-word-limit
            placeholder="请输入"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
	    <span class="dialog-footer">
	      <el-button @click="addFloorDialogVisible = false">取消</el-button>
	      <el-button type="primary" @click="handleAddFloor">确定</el-button>
	    </span>
    </template>
  </el-dialog>

  <!-- 编辑楼层对话框 -->
  <el-dialog title="编辑楼层" v-model="editFloorDialogVisible" width="30%">
    <el-form :model="floorForm" label-width="80px" :rules="floorRules" ref="floorFormRef">
      <el-form-item label="楼层名称" prop="floorName">
        <el-input
            v-model="floorForm.floorName"
            maxlength="5"
            show-word-limit
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
	    <span class="dialog-footer">
	      <el-button @click="editFloorDialogVisible = false">取消</el-button>
	      <el-button type="danger" @click="handleDeleteFloor">删除</el-button>
	      <el-button type="primary" @click="handleEditFloor">确定</el-button>
	    </span>
    </template>
  </el-dialog>

  <!-- 添加或修改房间对话框 -->
  <el-dialog :title="roomTitle" v-model="roomDialogVisible" width="500px" append-to-body>
    <el-form
        :model="roomForm"
        :rules="roomRules"
        ref="roomFormRef"
        label-width="80px"
    >
      <!-- 房间号 -->
      <el-form-item label="房间号" prop="roomCode">
        <el-input
            v-model="roomForm.roomCode"
            maxlength="5"
            show-word-limit
            placeholder="请输入房间号"
        ></el-input>
      </el-form-item>

      <!-- 房间类型下拉框 -->
      <el-form-item label="房间类型" prop="roomTypeId">
        <el-select
            v-model="roomForm.roomTypeId"
            placeholder="请选择房间类型"
        >

          <el-option
              v-for="type in roomTypeList"
              :key="type.id"
              :label="type.name"
              :value="type.id"
          ></el-option>

        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitRoomForm">确 定</el-button>
        <el-button @click="resetRoomForm">取 消</el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 添加或修改床位对话框 -->
  <el-dialog :title="bedTitle" v-model="bedDialogVisible" width="500px" append-to-body>
    <el-form
        :model="bedForm"
        :rules="bedRules"
        ref="bedFormRef"
        label-width="80px"
    >
      <!-- 床位号 -->
      <el-form-item label="床位号" prop="bedNo">
        <el-input
            v-model="bedForm.bedNo"
            maxlength="10"
            show-word-limit
            placeholder="请输入床位号"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitBedForm">确 定</el-button>
        <el-button @click="resetBedForm">取 消</el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 房间详情对话框 -->
  <el-dialog title="房间详情" v-model="roomDetailDialogVisible" width="600px" append-to-body>
    <div class="room-detail-content">
      <div class="room-summary">
        <p><span class="label">房间号：</span>{{ roomDetail.room.roomCode }}</p>
        <p><span class="label">房间类型：</span>{{ roomDetail.roomType.name }}</p>
        <p><span class="label">总床位数：</span>{{ roomDetail.roomType.bedCount }}</p>
        <p><span class="label">入住床位数：</span>{{ roomDetail.occupiedBedCount }}</p>
        <p><span class="label">入住率：</span>{{ roomDetail.occupancyRate }}%</p>
      </div>
      <el-table :data="roomDetail.bedList" border style="width: 100%; margin-top: 20px;">
        <el-table-column prop="bedNo" label="床位号"></el-table-column>
        <el-table-column prop="elderName" label="老人姓名"></el-table-column>
        <el-table-column prop="careLevel" label="护理等级"></el-table-column>
        <el-table-column prop="stayPeriod" label="入住期限" width="190"></el-table-column>
      </el-table>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="roomDetailDialogVisible = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
  </div>
</template>

<script setup>
import { listRoom, listFloor, addFloor, updateFloor, delFloor, addRoom, updateRoom, delRoom, addBed, updateBed, delBed } from "@/api/residing/room";
import { listRoomTypeEnabled } from "@/api/residing/roomType";
const { proxy } = getCurrentInstance()

// 弹窗显隐控制
const addFloorDialogVisible = ref(false);
const editFloorDialogVisible = ref(false);
const roomDialogVisible = ref(false);
const bedDialogVisible = ref(false);
const roomDetailDialogVisible = ref(false);

// 响应式数据
const roomList = ref([]); 		// 房间列表（含床位信息）
const floorList = ref([]);		// 楼层列表
const roomTypeList = ref([])	//房间类型
const activeFloorId = ref('1'); // 当前选中的楼层ID，默认1楼
const roomTitle = ref('')  //房间弹窗标题
const bedTitle = ref('')  //床位弹窗标题

// 床位状态统计
const freeCount = ref(0); // 空闲床位数量
const occupiedCount = ref(0); // 已入住床位数量
const leaveCount = ref(0); // 请假中床位数量


// 楼层表单数据
const floorForm = ref({
  id: '',        // 楼层ID
  floorName: '' // 楼层名称
});

// 房间表单数据
const roomForm = ref({
  id: '',           // 房间id
  roomCode: ''   ,  // 房间编号
  roomTypeId: '',    // 房间类型id
  floorId: ''  //楼层id
});

// 床位表单数据
const bedForm = ref({
  id: '', // 床位id
  bedNo: '', // 床位号
  roomId: '' // 房间id
});

// 房间详情数据
const roomDetail = ref({
  room: {},           // 房间基础信息
  roomType: {},       // 房间类型信息
  bedList: [],        // 床位列表
  occupiedBedCount: 0, // 入住床位数
  occupancyRate: 0    // 入住率（百分比）
});

// 表单验证规则
const floorRules = ref({
  floorName: [{ required: true, message: '请输入楼层名称', trigger: 'blur' }]
});

const roomRules = reactive({
  roomCode: [
    { required: true, message: '请输入房间号', trigger: 'blur' },
    { pattern: /^[0-9]*$/, message: '房间号只能是数字', trigger: 'blur' }
  ],
  roomTypeId: [
    { required: true, message: '请选择房间类型', trigger: 'blur' }
  ]
});

const bedRules = ref({
  bedNo: [
    { required: true, message: '请输入床位号', trigger: 'blur' },
    { pattern: /^[0-9]*$/, message: '床位号只能是数字', trigger: 'blur' }
  ]
});

// 表单引用（用于验证）
const floorFormRef = ref(null);

// 新增楼层
function openAddFloorDialog() {
  floorForm.value = { floorName: '', sort: 1, id: '' }; // 重置表单
  addFloorDialogVisible.value = true;
}

// 编辑楼层
function openEditFloorDialog(floor) {
  floorForm.value = {
    floorName: floor.floorName,
    id: floor.id
  };
  editFloorDialogVisible.value = true;
}

// 新增房间
function openAddRoomDialog() {
  resetRoomForm()
  roomTitle.value = "新增房间"
  roomDialogVisible.value = true;
}

// 删除房间
function handleDeleteRoom(room) {
  proxy.$modal.confirm('是否确认删除房间号为"' + room.room.roomCode + '"的房间？').then(function() {
    return delRoom(room.room.id)
  }).then(() => {
    getList(activeFloorId.value)
    proxy.$modal.msgSuccess("删除成功")
  }).catch(() => {})
}

// 修改房间
function handleUpdateRoom(room) {
  resetRoomForm()
  roomForm.value = {
    id: room.room.id,  //房间id
    roomCode: room.room.roomCode   ,  // 房间编号
    roomTypeId: room.roomType.id    // 房间类型id
  }
  roomTitle.value = "修改房间"
  roomDialogVisible.value = true;
}

// 房间提交按钮
function submitRoomForm() {
  proxy.$refs["roomFormRef"].validate(valid => {
    if (valid) {
      if (roomForm.value.id != '') {
        updateRoom(roomForm.value).then(response => {
          proxy.$modal.msgSuccess("修改成功")
          roomDialogVisible.value = false
          getList(activeFloorId.value)
        })
      } else {
        addRoom(roomForm.value).then(response => {
          proxy.$modal.msgSuccess("新增成功")
          roomDialogVisible.value = false
          getList(activeFloorId.value)
        })
      }
    }
  })
}


// 新增床位
function openAddBedDialog(room) {
  resetBedForm()
  bedForm.value.roomId=room.room.id
  bedTitle.value = "新增床位"
  bedDialogVisible.value = true;
}

// 删除床位
function handleDeleteBed(bed) {
  delBed(bed.id).then(() => {
    getList(activeFloorId.value)
    proxy.$modal.msgSuccess("删除成功")
  }).catch(() => {})
}

// 修改床位
function handleUpdateBed(bed) {
  resetBedForm()
  bedForm.value = {
    id: bed.id,  //床位id
    bedNo: bed.bedNo   ,  // 床位号
  }
  bedTitle.value = "修改床位"
  bedDialogVisible.value = true;
}

// 床位提交按钮
function submitBedForm() {
  proxy.$refs["bedFormRef"].validate(valid => {
    if (valid) {
      if (bedForm.value.id != '') {
        updateBed(bedForm.value).then(response => {
          proxy.$modal.msgSuccess("修改成功")
          bedDialogVisible.value = false
          getList(activeFloorId.value)
        })
      } else {
        addBed(bedForm.value).then(response => {
          proxy.$modal.msgSuccess("新增成功")
          bedDialogVisible.value = false
          getList(activeFloorId.value)
        })
      }
    }
  })
}

// 查看房间详情
function openRoomDetailDialog(room) {
  // 计算「入住床位数」和「入住率」
  const occupiedCount = room.bedList.filter(bed => bed.elderName).length; // 过滤出有老人姓名的床位（已入住）
  const totalCount = room.roomType.bedCount; // 房间类型的总床位数
  const rate = totalCount > 0
      ? Math.round((occupiedCount / totalCount) * 100) // 入住率计算（四舍五入取整）
      : 0;

  // 赋值详情数据
  roomDetail.value = {
    room: room.room,
    roomType: room.roomType,
    bedList: room.bedList,
    occupiedBedCount: occupiedCount,
    occupancyRate: rate
  };
  roomDetailDialogVisible.value = true; // 打开弹窗
}



// 重置房间表单
function resetRoomForm() {
  roomForm.value = {
    id: '',           // 房间id
    roomCode: ''   ,  // 房间编号
    roomTypeId: '' ,   // 房间类型id
    floorId: activeFloorId.value  //楼层id
  };
  roomDialogVisible.value = false;
}

// 重置房间表单
function resetBedForm() {
  bedForm.value = {
    id: '',           // 床位id
    bedNo: ''   ,  // 床位号
    roomId: '' ,   // 房间id
  };
  bedDialogVisible.value = false;
}

// 新增楼层
function handleAddFloor() {
  floorFormRef.value.validate((valid) => {
    if (valid) {
      // 调用新增楼层的接口，如
      addFloor(floorForm.value).then(response => {
        proxy.$modal.msgSuccess("新增成功")
        addFloorDialogVisible.value = false;
        getFloorList()
      })
    }
  });
}

// 编辑楼层（调用接口逻辑，此处仅模拟提示）
function handleEditFloor() {
  floorFormRef.value.validate((valid) => {
    if (valid) {
      updateFloor(floorForm.value).then(response => {
        proxy.$modal.msgSuccess("修改成功")
        editFloorDialogVisible.value = false;
        getFloorList()
      })
    }
  });
}

// 删除楼层
function handleDeleteFloor() {

  // 调用删除楼层的接口
  proxy.$modal.confirm('是否确认删除 ' + floorForm.value.floorName + ' ？').then(function() {
    return delFloor(floorForm.value.id)
  }).then(() => {
    getFloorList()
    proxy.$modal.msgSuccess("删除成功")
  }).catch((error) => {
    // 🔍 步骤4：捕获错误（取消确认 / 接口失败）
    if (error) {
      // 接口调用失败（如 404、500）
      proxy.$modal.msgError(`删除失败：${error.message}`);
      console.error("删除楼层接口错误：", error);
    }
    // 「取消」按钮触发的 reject，可选择性提示或忽略
  });
  editFloorDialogVisible.value = false;
}

/** 查询房间 */
function getList(floorId) {
  listRoom(floorId).then(response => {
    roomList.value = response.rows;
    console.log('房间数据:', roomList.value);
    calculateStats(); // 计算床位状态统计
  });
}

/** 查询楼层 */
function getFloorList() {
  listFloor().then(response => {
    floorList.value = response.rows;
    console.log('楼层数据:', floorList.value);
  });
}

/** 查询房间类型 */
function getRoomTypeList() {
  listRoomTypeEnabled().then(response => {
    roomTypeList.value = response.rows;
    console.log('房间类型数据:', roomTypeList.value);
  });
}

/** 处理楼层切换 */
function handleFloorChange(floor) {
  activeFloorId.value = floor.id;
  floorForm.value = {
    floorName: floor.floorName,
    id: floor.id
  };
  getList(floor.id);
}

/** 计算床位状态统计 */
function calculateStats() {
  let free = 0;
  let occupied = 0;
  let leave = 0;

  // 遍历所有房间的床位
  roomList.value.forEach(room => {
    if (room.bedList && room.bedList.length) {
      room.bedList.forEach(bed => {
        if (bed.bedStatus === '2') {
          leave++;
        } else if (bed.elderName) {
          occupied++;
        } else {
          free++;
        }
      });
    }
  });

  freeCount.value = free;
  occupiedCount.value = occupied;
  leaveCount.value = leave;
}

/** 判断房间床位是否已满 */
function isBedCountFull(room) {
  // 房间类型的总床位数 vs 当前已有的床位数
  return room.bedList.length >= room.roomType.bedCount;
}

// 当合并后的房间列表变化时重新计算统计
watch(roomList, calculateStats);

// 初始化加载数据
getFloorList();
getList(activeFloorId.value); // 默认加载1楼数据
getRoomTypeList();
</script>

<style scoped>
.page-container {
  padding: 20px;
  background-color: #f9fafb;
}

/* 顶部操作栏样式 */
.top-operation-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* 楼层选择样式 */
.floor-selection {
  display: flex;
  align-items: center;
}

.floor-selection .label {
  margin-right: 10px;
  font-weight: 500;
  color: #1f2937;
}

.el-radio-group {
  display: flex;
  gap: 10px;
}

/* 无边框按钮基础样式 */
.plain-btn {
  border: none !important;
  background: transparent !important;
  color: #0284c7 !important;
  padding: 5px 10px;
  font-size: 14px;
}

/* 按钮 hover 交互（正常状态） */
.plain-btn:hover {
  background-color: #f0f0f0 !important;
  color: #004e73 !important;
}

/* 禁用状态（置灰 + 不可点击） */
.plain-btn.is-disabled,
.el-button.is-disabled {
  border: none !important;
  background-color:#dbdbdb;
  color: #9ca3af !important;
  cursor: not-allowed !important;
}

/* 状态统计样式 */
.status-stats {
  display: flex;
  gap: 20px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 15px;
  border-radius: 20px;
  font-weight: 500;
}

.stat-item .count {
  font-size: 16px;
  font-weight: bold;
}

.stat-item.free {
  background-color: #e0f2fe;
  color: #0284c7;
}

.stat-item.occupied {
  background-color: #dcfce7;
  color: #166534;
}

.stat-item.leave {
  background-color: #fef3c7;
  color: #92400e;
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  gap: 10px;
}

/* 房间列表样式 */
.room-container {
  padding: 0;
}

/* 房间网格：一行三个 */
.room-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.room-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  background-color: #f2f2f2;
}

/* 房间头部样式 */
.room-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  background-color: #f2f2f2;
  border-bottom: 1px solid #e5e7eb;
}

.room-basic h3 {
  margin: 0 0 6px 0;
  font-size: 16px;
  color: #1f2937;
}

.room-basic p {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
}

.room-actions {
  display: flex;
  gap: 6px;
}

/* 床位区域：整体灰色背景 */
.beds-wrapper {
  padding: 15px;
  background-color: #f2f2f2;
}

/* 床位网格：每排固定2个，自动换行 */
.beds-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* 单个床位样式 */
.bed-item {
  padding: 12px;
  border-radius: 6px;
  background-color: #fff;
  transition: all 0.3s ease;
  position: relative; /* 为操作图标绝对定位做准备 */
}

.bed-item:hover {
  background-color: #f9fafb; /* 悬停时背景暗化 */
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 床位信息容器：相对定位，承载操作图标 */
.bed-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  width: 100%;
}

/* 床位操作图标容器：默认隐藏，hover 显示 */
.bed-actions {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: none;
  gap: 8px; /* 图标间距 */
}

/* 悬停时显示操作图标 */
.bed-item:hover .bed-actions {
  display: flex;
}

/* 操作图标样式 */
.bed-actions .el-icon {
  font-size: 18px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.bed-actions .edit-icon {
  color: #409eff; /* 编辑图标：蓝色 */
}

.bed-actions .delete-icon {
  color: #f56c6c; /* 删除图标：红色 */
}

.bed-actions .el-icon:hover {
  color: #1f2937; /*  hover 加深 */
}

.status-image-container {
  flex-shrink: 0; /* 防止图片被挤压变形 */
}

.status-image {
  width: 60px; /* 调整图片宽度，适配左侧布局 */
  height: auto;
  border-radius: 4px;
}

.text-content p {
  margin: 4px 0;
  font-size: 14px;
  color: #1f2937;
}

/* 无床位提示 */
.no-bed-tip {
  padding: 30px 15px;
  text-align: center;
}

/* 空状态组件样式：垂直+水平居中 */
.custom-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 10px;
  margin-top: 18px;
}
.custom-empty .el-empty__icon {
  margin-bottom: 8px; /* 图标与文字间距 */
}
.custom-empty .el-empty__description {
  text-align: center; /* 文字居中 */
}

.floor-selection {
  display: flex;
  align-items: center;
  gap: 8px;
}

.floor-selection .label {
  font-weight: 500;
  color: #333;
}

.floor-tabs {
  display: flex;
  gap: 10px; /* 楼层标签之间的间距 */
}

.floor-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px; /* 图标与文字的间距 */
  padding: 6px 12px;
  border: 1px solid #dcdfe6; /* 未选中时的边框 */
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease; /*  hover/选中的过渡动画 */
}

/* hover 效果 */
.floor-tab:hover {
  border-color: #409eff;
  background-color: #f0f9ff;
}

/* 选中效果（模拟 el-radio 的蓝色选中态） */
.floor-tab.active {
  border-color: #409eff;
  background-color: #409eff;
  color: #fff;
}

.edit-icon {
  font-size: 16px; /* 图标大小 */
}

.floor-name {
  font-size: 14px;
}

/* 房间详情弹窗内容样式 */
.room-detail-content {
  padding: 15px;
}

.room-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 15px;
}

.room-summary .label {
  font-weight: bold;
  margin-right: 5px;
}

.room-summary p {
  margin: 0;
  line-height: 1.6;
}
</style>